<template>
    <l-layout class="l-tab-page" :left="240" >
        <template #left > 
            <l-panel :title="$t('公司信息')" style="padding-right:0;" >
                <el-tree :data="lr_companyTree" default-expand-all :expand-on-click-node="false"  @node-click="handleCompanyClick">
                    <span class="lr-tree-node"  slot-scope="{ node}">
                        <i class="fa fa-sitemap"></i>
                        {{ $t(node.label) }}
                    </span>
                </el-tree>
            </l-panel>
        </template>
        <l-layout>
            <template #left >
                <l-panel :title="$t('部门信息')" style="padding-left:0;padding-right:0;" >
                    <el-tree :data="departmentsTree" default-expand-all :expand-on-click-node="false"  @node-click="handleDepartmentClick">
                        <span class="lr-tree-node"  slot-scope="{ node}">
                            <i class="fa fa-sitemap"></i>
                            {{ $t(node.label) }}
                        </span>
                    </el-tree>
                </l-panel>
            </template>
            <l-select-panel
                    style="padding:8px;padding-left:0;"
                    ref="selectPanel"
                    v-model="value"
                    :selectedData.sync="selectedData"
                    :columns="columns"
                    :isTree="true"
                    :isPage="false"
                    :notSelectChildren="true"
                    :loadSelectTable="loadSelectTable"
                    
                    model="client"
                    
                    idKey="f_PostId"
                    pidKey="f_ParentId"
                    valueKey="f_PostId"
                    labelKey="f_Name"
                >
                <template v-slot:f_DepartmentId="scope" >
                   {{lr_departmentName(lr_departments[scope.row.f_CompanyId] || [],scope.row.f_DepartmentId)}}
                </template>

            </l-select-panel>
        </l-layout>
    </l-layout>
</template>
<script>

export default {
    name:'l-post-select-panel',
    data(){
        return {
            value:'',
            companyId:'',
            departmentId:'',
            departmentLoading:false,

            selectedData:[],
            columns: [
                {label:'名称',prop:'f_Name',minWidth:'160'},
                {label:'编号',prop:'f_EnCode',width:'110'},
                {label:'所属部门',prop:'f_DepartmentId',width:'120'}
            ]
        };
    },
    computed:{
        departmentsTree(){
            return this.lr_departmentTree(this.lr_departments[this.companyId])
        }
    },
    created () {
        this.lr_loadCompanys()
    },
    methods:{
        handleCompanyClick(node) {
            this.companyId = node.value
            this.departmentId = ''
            this.lr_loadDepartments(this.companyId)
            this.tableLoadData()
        },
        handleDepartmentClick(node){
            this.departmentId = node.value;
            this.tableLoadData()
        },
        tableLoadData(){
            this.$refs.selectPanel.init()
        },
        async loadSelectTable(postData){
            await this.lr_loadPosts(this.companyId)
            let data = this.lr_posts[this.companyId]
            if(!this.$validatenull(postData.keyword)){
                data = data.filter(item => item.f_Name.indexOf(postData.keyword) >-1 || item.f_EnCode.indexOf(postData.keyword)>-1)
            }
            else if(this.departmentId){
                data = data.filter(t=>t.f_DepartmentId == this.departmentId)
            }

            return {rows:data}            
        },
        resetForm(){
            this.$refs.selectPanel.reset()
            this.tableLoadData()
        },
        setForm(){
            
        },
        getForm(){
            return this.$deepClone(this.selectedData).map(t=>{ return {...t,name:`${this.lr_departmentName(this.lr_departments[t.f_CompanyId] || [],t.f_DepartmentId)}-${t.f_Name}`} });
        }
    }
}
</script>